<script lang="ts" setup>
import { SearchParams } from "../data";

defineProps({
	orderStatus: {
		type: Array<{
			id: number;
			value: number | string;
		}>,
		required: true,
	},
});

const searchData = () => {
	return {
		patientName: "",
		doctorName: "",
		nutritionistName: "",
		orderStatus: "",
		orderAppointmentTime: [],
	};
};
const model = ref<SearchParams>(searchData());
const emit = defineEmits<{
	(e: "search", val: SearchParams): void;
}>();

// const model = useVModel(props, "modelValue", emit);
const onSearch = () => {
	emit("search", model.value);
};
const onRest = () => {
	model.value = searchData();
	emit("search", model.value);
};
</script>
<template>
	<el-card shadow="never" style="margin-bottom: 14px">
		<el-row justify="space-between">
			<div class="search-box">
				<el-form :inline="true" label-position="left" :model="model" class="demo-form-inline" label-width="80px">
					<el-row :gutter="20">
						<el-col :span="8">
							<el-form-item label="就诊人">
								<el-input
									v-model="model.patientName"
									style="width: 100%"
									placeholder="请输入就诊人"
								></el-input></el-form-item
						></el-col>
						<el-col :span="8">
							<el-form-item label="营养师">
								<el-input
									v-model="model.nutritionistName"
									style="width: 100%"
									placeholder="请输入营养师"
								></el-input></el-form-item
						></el-col>
						<el-col :span="8">
							<el-form-item label="临床医师">
								<el-input
									v-model="model.doctorName"
									style="width: 100%"
									placeholder="请输入临床医师"
								></el-input></el-form-item
						></el-col>
						<el-col :span="8">
							<el-form-item label="订单状态">
								<el-select v-model="model.orderStatus" placeholder="请选择订单状态" style="width: 100%">
									<el-option v-for="item in orderStatus" :key="item.id" :label="item.value" :value="item.id" />
								</el-select> </el-form-item
						></el-col>
						<el-col :span="8">
							<el-form-item label="预约时间">
								<el-date-picker
									v-model="model.orderAppointmentTime"
									type="daterange"
									range-separator="至"
									start-placeholder="开始日期"
									end-placeholder="终止日期"
									value-format="YYYY-MM-DD"
								/>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<div class="search-box-btn">
				<el-space direction="vertical">
					<el-button type="primary" @click="onSearch"
						><template #icon><IconSvg name="search" :iconStyle="{ width: '80px', height: '80px' }" /></template
						>查询</el-button
					>
					<el-button @click="onRest">
						<template #icon><IconSvg name="rest" /></template>重置</el-button
					>
				</el-space>
			</div>
		</el-row>
	</el-card>
</template>

<style scoped>
.demo-form-inline {
	width: 100%;
}
.demo-form-inline .el-form-item {
	width: 100%;
	margin-bottom: 0;
}
</style>
